<template>
  <view class="qr-code-container">
    <!-- 关闭按钮：返回上一页（di10） -->
    <view class="close-btn" @click="closePage">×</view>

    <!-- 标题：明确页面用途 -->
    <view class="title">协助代领信息填写

    </view>


    <!-- 更多操作按钮 -->
    <view class="more-btn">...</view>

    <!-- 温馨提示区域 -->
    <view class="note">
      <text>温馨提示:</text>
      <text>Please Note:</text>
      <text>选择线下扫码领取，则不能缺货登记。选择线上缺货登记，则不能线下扫码领取。</text>
      <text>On-site pickup and backorder registration are mutually exclusive options.</text>
    </view>

    <!-- 表单区域（提交前显示） -->
    <view class="white-area" v-if="!isSubmitted">
      <view class="input-item">
        <text class="label">姓名：</text>
        <input type="text" class="input" placeholder="请输入姓名" v-model="name" />
      </view>
      <view class="input-item">
        <text class="label">联系电话 Phone Number*</text>
        <input type="tel" class="input" placeholder="请输入联系电话" v-model="phoneNumber" />
      </view>
      <view class="input-item">
        <text class="label">省市区 State/City/District*</text>
        <input type="text" class="input" placeholder="请选择省市区" v-model="region" />
      </view>
      <view class="input-item">
        <text class="label">详细地址 Detailed Address*</text>
        <input type="text" class="input" placeholder="请输入详细地址" v-model="detailedAddress" />
      </view>
    </view>

    <!-- 提交后显示的信息区域 -->
    <view class="white-area" v-else>
      <view class="input-item">
        <text class="label">姓名 Name*</text>
        <text class="display-text">{{ name }}</text>
      </view>
      <view class="input-item">
        <text class="label">联系电话 Phone Number*</text>
        <text class="display-text">{{ phoneNumber }}</text>
      </view>
      <view class="input-item">
        <text class="label">省市区 State/City/District*</text>
        <text class="display-text">{{ region }}</text>
      </view>
      <view class="input-item">
        <text class="label">详细地址 Detailed Address*</text>
        <text class="display-text">{{ detailedAddress }}</text>
      </view>
      <button class="edit-btn" @click="editAddress">修改 Edit Address</button>
      <button class="register-btn" @click="goToSecondPage">缺货登记</button>
    </view>

    <!-- 提交按钮（仅提交前显示） -->
    <button class="submit-btn" @click="submitForm" v-if="!isSubmitted">提交 Save Address</button>

    <!-- 技术支持文字 -->
    <view class="tech-support">成电芯伙伴提供技术支持</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isSubmitted: false,
      name: '',
      phoneNumber: '',
      region: '',
      detailedAddress: ''
    };
  },
  onShow() {
    // 从本地存储恢复数据（若存在）
    const savedData = uni.getStorageSync('authorizeFormData');
    if (savedData) {
      this.name = savedData.name || '';
      this.phoneNumber = savedData.phoneNumber || '';
      this.region = savedData.region || '';
      this.detailedAddress = savedData.detailedAddress || '';
      this.isSubmitted = savedData.isSubmitted || false;
    }
  },
  methods: {
    closePage() {
      uni.navigateBack({
        delta: 1,
        success: () => console.log('成功返回di10'),
        fail: (err) => {
          console.error('返回失败:', err);
          uni.showToast({ title: '返回失败，请重试', icon: 'none', duration: 1500 });
        }
      });
    },
    submitForm() {
      if (!this.name.trim()) {
        return uni.showToast({ title: '请输入姓名', icon: 'none', duration: 1500 });
      }
      if (!this.phoneNumber.trim()){
        return uni.showToast({ title: '请输入正确的联系电话', icon: 'none', duration: 1500 });
      }
      if (!this.region.trim()) {
        return uni.showToast({ title: '请选择省市区', icon: 'none', duration: 1500 });
      }
      if (!this.detailedAddress.trim()) {
        return uni.showToast({ title: '请输入详细地址', icon: 'none', duration: 1500 });
      }

      this.isSubmitted = true;
      // 保存数据到本地存储
      const formData = {
        name: this.name,
        phoneNumber: this.phoneNumber,
        region: this.region,
        detailedAddress: this.detailedAddress,
        isSubmitted: this.isSubmitted
      };
      uni.setStorageSync('authorizeFormData', formData);
      uni.showToast({ title: '信息提交成功', icon: 'success', duration: 1200 });
      this.goToSecondPage();
    },
    editAddress() {
      this.isSubmitted = false;
      // 重新读取本地存储数据，确保显示最新值
      const savedData = uni.getStorageSync('authorizeFormData');
      if (savedData) {
        this.name = savedData.name || '';
        this.phoneNumber = savedData.phoneNumber || '';
        this.region = savedData.region || '';
        this.detailedAddress = savedData.detailedAddress || '';
      }
      uni.showToast({ title: '可重新编辑地址     （请刷新）', icon: 'none', duration: 1000 });
    },
    goToSecondPage() {
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/index/shou_ye/di13',
          success: () => console.log('跳转到di13成功'),
          fail: (err) => {
            console.error('跳转失败:', err);
            uni.showToast({ title: '跳转失败，请检查路径', icon: 'none', duration: 1500 });
          }
        });
      }, 1200);
    }
  }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.qr-code-container {
  padding: 20rpx;
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  font-size: 40rpx;
  cursor: pointer;
  z-index: 10;
  color: #333;
}

.title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin: 20rpx 0 40rpx;
  padding-top: 20rpx;
  color: #333;
}

.more-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 40rpx;
  cursor: pointer;
  z-index: 10;
  color: #333;
}

.note {
  background-color: #fff8e1;
  padding: 20rpx;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

.note text {
  display: block;
  margin-bottom: 10rpx;
}

.note text:last-child {
  margin-bottom: 0;
}

.white-area {
  background-color: #fff;
  padding: 30rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.input-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}

.input-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.input {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
  font-size: 28rpx;
  color: #333;
}

.input::placeholder {
  color: #ccc;
}

.submit-btn {
  width: 100%;
  padding: 25rpx;
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  cursor: pointer;
  margin-bottom: 40rpx;
}

.display-text {
  font-size: 28rpx;
  color: #333;
  margin-top: 10rpx;
  line-height: 1.4;
}

.edit-btn {
  width: 100%;
  padding: 25rpx;
  background-color: #2196f3;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  cursor: pointer;
  margin-bottom: 20rpx;
}

.register-btn {
  width: 100%;
  padding: 25rpx;
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 32rpx;
  cursor: pointer;
}

.tech-support {
  text-align: center;
  font-size: 26rpx;
  color: #999;
  margin-top: 40rpx;
  padding-bottom: 20rpx;
}
</style>